<template>
  <div>
    <div v-show="tableData.length == 0" class="zanwu">{{ $t("m.NoData") }}</div>
    <div v-show="!tableData.length == 0" class="anmesd AccountTableCenter on">
      <button
        class="cancelOrderbtn"
        :class="multipleSelection.length > 0 ? 'hover' : ''"
        @click="BatchCancellation"
      >
        {{ $t("table.current_commission.56hzkqf0b480") }}
      </button>
      <el-table
        @row-click="cellClicks"
        @row-contextmenu="contextmenu"
        :max-height="heightList"
        :data="tableData"
        style="width: 100%"
        class="tableAuto"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="65"
          fixed="left"
          :selectable="checkSelectable"
        ></el-table-column>
        <el-table-column
          width="150px"
          :label="$t('quotation.left_list.56hzdc682d00')"
          fixed="left"
        >
          <template slot-scope="scope">
            <div class="first_table" style="padding-left: 10px">
              <h2>{{ scope.row.name }}</h2>
              <p class="f-cb">
                <img
                  class="type_icon"
                  :src="
                    scope.row.market == 'HKEX'
                      ? HKicon
                      : scope.row.market == 'US'
                      ? USicon
                      : scope.row.market == 'SSE'
                      ? SHicon
                      : SZicon
                  "
                  alt=""
                />
                {{ scope.row.symbol }}
              </p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120px"
          :label="$t('table.current_commission.56hzkqf0bt80')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.priceType | priceTypeList(te) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '140px' : '90px'"
          :label="$t('table.current_commission.56hzkqf0bxw0')"
          align="center"
        >
          <template slot-scope="scope">
            <div :class="scope.row.direction == 1 ? 'red' : 'green'">
              {{ scope.row.direction | jiaoyiType(scope.row.tradeType, te) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '160px' : '100px'"
          :label="$t('table.current_commission.56hzkqf0c1g0')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.tradePrice }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '160px' : '100px'"
          :label="$t('table.current_commission.56hzkqf0c4w0')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.tradeNum) | formatNumberRgx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="90px"
          :label="$t('table.current_commission.56hzkqf0cdw0')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="center_atble">
              {{
                Number(scope.row.latestPrice)
                  | toFixed(Number(scope.row.precision))
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120px"
          :label="$t('table.current_commission.56hzkqf0chg0')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.dealNum) | formatNumberRgx}}</div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120px"
          :label="$t('table.current_commission.56hzkqf0cm00')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.restNum) | formatNumberRgx}}</div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="120px"
          :label="$t('table.current_commission.56hzkqf0cp40')"
          align="center"
        >
          <template slot-scope="scope">
            <!-- 非部分成交时，成交均价，成交数量为-- -->
            <div v-if="scope.row.status == 5">{{ scope.row.dealPrice }}</div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '180px' : '120px'"
          :label="$t('table.current_commission.56hzkqf0cs00')"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.expireType != 3">
              {{ scope.row.expireType | expireTypeList(te) }}
            </div>
            <div v-else>{{ scope.row.expireDate }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :min-width="lang == 'en' ? '260px' : '160px'"
          :label="$t('table.current_commission.56hzkqf0cug0')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ Number(scope.row.tradeFee).toFixed(2) }}</div>
          </template>
        </el-table-column>
        <!-- 委托时间 -->
        <el-table-column
          :label="$t('m.CommTime')"
          :min-width="lang == 'en' ? '140px' : '95px'"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.tradeTime == 0">--</div>
            <div v-else>
              <p>{{ scope.row.tradeTime | datas }}</p>
              <p>{{ scope.row.tradeTime | time }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.current_commission.56hzkqf0cxc0')"
          :min-width="lang == 'en' ? '180px' : '90px'"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.amendTime == 0">--</div>
            <div v-else>
              <p>{{ scope.row.amendTime | datas }}</p>
              <p>{{ scope.row.amendTime | time }}</p>
            </div>
          </template>
        </el-table-column>
        <!-- 成交金额 -->
        <el-table-column
          :label="$t('table.current_commission.56hzkqf0d0o0')"
          min-width="100"
          align="center"
        >
          <!-- 当前委托的成交金额不包含佣金 -->
          <template slot-scope="scope">
            <div v-if="scope.row.status == 5">
              {{
                (
                  Number(scope.row.dealNum) * Number(scope.row.dealPrice)
                ).toFixed(2) | formatNumberRgx
              }}
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <!-- 融资/融券 -->
        <el-table-column
          :min-width="lang == 'en' ? '180px' : '120px'"
          align="center"
        >
          <template slot="header">
            {{ $t("table.current_commission.56hzkqf0d3k0") }}
            <span
              class="FinancDescription"
              @click="FinancDescriptionClick"
            ></span>
          </template>
          <template slot-scope="scope" class="">
            <el-tooltip
              class="item"
              effect="dark"
              placement="right-start"
              v-if="scope.row.isFinance == 1"
              popper-class="isFinance"
            >
              <div slot="content" v-if="scope.row.tradeFinance">{{$t('table.current_commission.56hzdwf0dqk0')}}{{Number(scope.row.tradeFinance).toFixed(2) | formatNumberRgx}}</div>
              <div slot="content" v-else>{{$t('table.current_commission.56hzkqf0dc40')}}</div>
              <span class="yesFinan">{{
                $t("table.current_commission.56hzkqf0d6c0")
              }}</span>
            </el-tooltip>
            <!-- 支持融券 -->
            <el-tooltip
              class="item"
              effect="dark"
              placement="right-start"
              v-if="scope.row.tradeType == 2"
              popper-class="isFinance"
            >
              <div slot="content">
                <!-- 融券数量 -->
                <span v-if="scope.row.totalNum"
                  >{{ $t("table.current_commission.56hzsfsweqk0")
                  }}{{ Math.abs(Number(scope.row.totalNum)) | formatNumberRgx }}</span
                >
                <span v-else>{{
                  $t("table.current_commission.56hzkqf0dcs0")
                }}</span>
              </div>
              <span class="yesFinan">{{
                $t("table.current_position.56hznbyp42o0")
              }}</span>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="$t('table.current_commission.56hzkqf0d980')"
              placement="right-start"
              v-if="scope.row.tradeType == 1 && scope.row.isFinance == 0"
              popper-class="isFinance"
            >
              <span class="yesFinan">{{
                $t("table.current_commission.56hzkqf0dc80")
              }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          min-width="100px"
          :label="$t('table.current_commission.56hzkqf0dg80')"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              {{
                scope.row.market == "HKEX"
                  ? "HKD"
                  : scope.row.market == "US"
                  ? "USD"
                  : "CNH"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          min-width="90px"
          :label="$t('table.current_commission.56hzkqf0dj00')"
          align="center"
        >
          <template slot-scope="scope">
            <div>{{ scope.row.status | DelegationStatus(te) }}</div>
          </template>
        </el-table-column>
        <el-table-column
          width="150px"
          :label="$t('table.current_commission.56hzkqf0dm40')"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="btns-box">
              <!-- 只有状态为委托成功（1）、部分成交（5）和部成部撤（10） 才能撤单和改单-->
              <div
                v-if="
                  scope.row.status == 1 ||
                  scope.row.status == 5 ||
                  scope.row.status == 10
                "
              >
                <button class="small-blur" @click="cancelOrders(scope.row)">
                  {{ $t("table.current_commission.56hzkqf0dqk0") }}
                </button>
                <button @click="editForm(scope.row)" class="small-blur">
                  {{ $t("table.current_commission.56hzkqf0dtc0") }}
                </button>
              </div>
              <div v-else>
                <button class="small-blur over">
                  {{ $t("table.current_commission.56hzkqf0dqk0") }}
                </button>
                <button class="small-blur over">
                  {{ $t("table.current_commission.56hzkqf0dtc0") }}
                </button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      custom-class="drawer"
      size="380px"
      :close-on-press-escape="false"
      :wrapperClosable="false"
      :show-close="false"
      v-if="drawer"
      :before-close="beforeClose"
    >
      <BusinessDialog :tradeForm="tradeForm" @hideTrade="hideTrade"></BusinessDialog>
    </el-drawer>
  </div>
</template>
<script>
import {post_cancel_order} from '@/assets/js/API/order.js';
import dayjs from "dayjs";
import BusinessDialog from "@/components/account/right/BusinessDialog";
export default {
  props: ["tableData", "type"],
  components: {
    BusinessDialog,
  },
  filters: {
    datas(val) {
      return dayjs(val * 1000).format("YYYY-MM-DD");
    },
    time(val) {
      return dayjs(val * 1000).format("HH:mm:ss");
    },
  },
  data() {
    return {
      heightList: null,
      multipleSelection: [],
      ids: "",
      drawer: false, // 打开抽屉的条件
      tradeForm: {}, //传递给交易表单的参数
      tradeDirection: 0, // 1:买入，2卖出
      HKicon: require("@/assets/img/icon_hk.png"),
      USicon: require("@/assets/img/icon_us.png"),
      SHicon: require("@/assets/img/icon_sh.png"),
      SZicon: require("@/assets/img/icon_sz(1).png"),
      lang: "",
    };
  },
  mounted() {
    var _this = this;
    _this.$nextTick(function () {
      if (_this.tableData.length !== 0) {
        _this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 44;
      }
    });
    _this.lang = localStorage.getItem("lang");
  },
  methods: {
    FinancDescriptionClick() {
      this.$emit("DescriptionOpen");
    },
    hideTrade() {
      this.drawer = false;
    },
    cellClicks(row) {
      this.$store.dispatch("SetStockData", {
        symbol: row.symbol,
        securityType: row.securityType,
        market: row.market,
      });
    },
    checkSelectable(row, index) {
      // 1: 委托成功， 5：部分成交 10：部成部撤，可以进行撤单
      if (row.status == 1 || row.status == 5) {
        return true;
      } else {
        return false;
      }
    },
    contextmenu(row, column, event) {
      //右点击事件
      console.log(row);
      console.log(column);
      console.log(event);
    },
    handleSelectionChange(val) {
      var _this = this;
      this.multipleSelection = val;
      this.ids = "";
      val.forEach(function (res, index) {
        if (_this.ids == "") {
          _this.ids = res.id;
        } else {
          _this.ids = _this.ids + "," + res.id;
        }
      });
    },
    beforeClose(done) {
      done();
      $(".indivIndex").removeClass("on");
    },
    cancelOrders(item) {
      let _this = this;
      _this
        .$confirm(
          this.$i18n.t("m.pleaseWhether") +
            item.name +
            "(" +
            item.symbol +
            ")" +
            this.$i18n.t("m.Cancel_order") +
            "?",
          "",
          {
            confirmButtonText: this.$i18n.t("m.determine"),
            cancelButtonText: this.$i18n.t("m.cancel"),
            customClass: "Withdrawal",
            dangerouslyUseHTMLString: true,
          }
        )
        .then(() => {
          _this.cancelOrderSumit(item.id);
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: this.$i18n.t("m.Cancelled"),
          });
        });
    },
    cancelOrderSumit(id) {
      var _this = this;
        post_cancel_order({ id: id }).then((res) => {
          if (res.code == 1) {
            _this.$message({
              type: "success",
              message: res.msg,
            });
            this.$emit("RefreshList");
          } else {
            _this.$message.error(res.msg);
          }
        })
        .catch((error) => {});
    },
    BatchCancellation() {
      //this.$emit('RefreshList')
      var _this = this;
      _this
        .$confirm(this.$i18n.t("m.pleaseWhether2") + "?", "", {
          confirmButtonText: this.$i18n.t("m.determine"),
          cancelButtonText: this.$i18n.t("m.cancel"),
          customClass: "Withdrawal",
          dangerouslyUseHTMLString: true,
        })
        .then(() => {
          _this.cancelOrderSumit(_this.ids);
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: this.$i18n.t("m.Cancelled"),
          });
        });
    },
    // 打开改单交易抽屉
    async editForm(item) {
      this.tradeForm = {
        symbol: item.symbol,
        securityType: item.securityType,
        market: item.market,
        tradeNum: item.tradeNum, // 默认改单数量
        tradePrice: item.tradePrice, //交易价格
        direction: item.direction, //交易方向: 1:买入 2：卖出
        tradeType: item.tradeType, //交易方向: 1:做多 2：做空
        priceType: item.priceType, //价格类型: 1:限价单 2:市价单 3:条件单 POST传
        expireType: item.expireType, //过期时间类型: 条件单必传 1:当日有效 2:30天有效 POST传
        expireDate: item.expireDate, // 具体过期时间，仅过期时间类型3时有值
        id: item.id, // 改单ID
        tradeFee: item.tradeFee, // 手续费
        totalNum: item.totalNum, // 卖出/平仓时用到的持仓总量/融券数量
        tradeFreeze: item.tradeFreeze, // 交易冻结数量
        isFinance: item.isFinance, // 是否启用融资
        restNum: item.restNum, // 待成交数量
        dealNum: item.dealNum, // 已成交数量
        ableNum: item.ableNum, // 当前持仓可用数量
      };
      this.tradeDirection = item.direction;
      setTimeout(() => {
        this.drawer = true;
      }, 1200);
    },
  },
  watch: {
    tableData(val, old) {
      this.$nextTick(function () {
        this.heightList =
          $(window).height() - $(".tableAuto").offset().top - 44;
      });
    },
  },
};
</script>
<style lang="less">
@import "~@/assets/less/table.less";
.cancelOrderbtn {
  display: block;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 25px;
  margin: 0 5px;
  background-color: @fbSix;
  color: @fff;
  border: none;
  font-size: 12px;
  border-radius: 3px;
  position: absolute;
  right: 20px;
  top: -35px;
}
.cancelOrderbtn.hover {
  background-color: @hoverColor;
}
.small-blur.over {
  color: @fff;
  background: @fbSix;
}
.Withdrawal {
  background: @deepBg;
  border: 1px solid @deepBg;
  .el-message-box__content {
    color: @fff;
  }
  .el-message-box__message p {
    color: @fff;
  }
}
.drawer {
  background: @deepBg;
  height: 100vh;
  .el-drawer__header {
    display: none;
  }
}
</style>